<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <!-- layui js-->
    <script type="text/javascript" src="/static/layui/layui.js"></script>
</head>
<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black">恋 爱 广 场</div>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                    <a href="javascript:">
                        <i class="layui-icon layui-icon-friends"></i>
                        潘毅
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="">个人主页</a></dd>
                        <dd><a href="">设置</a></dd>
                        <dd><a href="">登出</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                    <a href="javascript:">
                        <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item" style="padding-left: 30px ; background: #5FB878"><a href="index"><i class="layui-icon layui-icon-heart-fill"></i>  广场</a></li>
                <li class="layui-nav-item" style="padding-left: 30px"><a href=""><i class="layui-icon layui-icon-friends"></i>  个人</a></li>
                <li class="layui-nav-item" style="padding-left: 30px"><a href="write"><i class="layui-icon layui-icon-release"></i>  发布</a></li>

            </ul>
        </div>
        <div class="layui-body">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                <legend>恩爱广场</legend>
            </fieldset>
                <div class="layui-col-md9" style="padding: 30px">
                    <div id="TimeLineNoteFlow"></div>
                </div>
        </div>
        <div class="layui-footer">
            copyright@panyi 2021
        </div>
    </div>

<script>
    layui.use(['flow','laytpl'], function(){
        var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
        var flow = layui.flow;
        var laytpl = layui.laytpl;
        var getTpl = Note.innerHTML
            ,view = document.getElementById('TimeLineNoteFlow');
        flow.load({
            elem: '#TimeLineNoteFlow' //指定列表容器
            ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                var lis = [];
                //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                $.get('/listByPage?page='+page, function(res){
                    var obj =JSON.parse(res);
                    console.log(obj.data)
                    console.log(obj.pages)
                    laytpl(getTpl).render(obj, function(html){
                        view.insertAdjacentHTML("beforebegin",html);
                    });
                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < obj.pages);
                });
            }
        });
    });
</script>
<script id="Note" type="text/html">
    {{#  layui.each(d.data, function(index, item){ }}
    <fieldset class="layui-elem-field">
        <legend>{{item.author}}</legend>
        <div class="layui-field-box">{{item.noteText}}</div>
        <hr class="layui-border-green">
        <div class="layui-row">
            <div class="layui-col-xs10">
                <div style="padding: 10px">{{item.modifyTime}}</div>
            </div>
            <div class="layui-col-xs2">
                <div style="padding: 10px">
                    <i class="layui-icon layui-icon-heart" style="padding: 10px"></i>
                    <i class="layui-icon layui-icon-gift" style="padding: 10px"></i>
                    <i class="layui-icon layui-icon-star" style="padding: 10px"></i>
                </div>
            </div>
        </div>
        <input type="text" name="title" required lay-verify="required" placeholder="评论" autocomplete="off" class="layui-input">
    </fieldset>
    {{#  }); }}
</script>
</body>
</html>